<template>
  <el-form
      label-position="left"
  >

    <!--  所属区域  -->
    <el-form-item label="所属区域">
      <Select
          @SelectChange="districtChange"
          :flushFlag="districtResetFlag"
          :options="districtOptions"
          :selectValue="districtOptions[0].value"
      />
    </el-form-item>

    <!--  频点类型  -->
    <el-form-item label="频点类型">
      <Select
          @SelectChange="typeChange"
          :flushFlag="districtResetFlag"
          :options="freqTypeForAdd"
          :selectValue="freqTypeForAdd[0].value"
      />
    </el-form-item>

    <!--  频点名称  -->
    <el-form-item label="频点名称">
      <el-input
          size="mini"
          style="width: 12vw"
          v-model="name"
          placeholder="请输入频点名称"></el-input>
    </el-form-item>

    <!--  频点  -->
    <el-form-item label="频点">
      <el-input
          size="mini"
          v-model="freq"
          style="width: 12vw"
          placeholder="请输入频点"></el-input>
    </el-form-item>

    <el-row style="text-align: center">
      <el-button
          type="primary"
          @click="addFreqType"
      >提交
      </el-button>
      <el-button
          type="info"
          @click="resetForm"
      >重置
      </el-button>
    </el-row>
  </el-form>
</template>

<script>
// --------------- element-ui ---------------------
import Select from "../../../../../components/element-ui/elSelect"
// --------------- axios ------------------------
import {addFreqCategory} from "../../../../../api/work";

export default {
  components: {Select},
  props: {
    districtOptions: {
      type: Array,
      default: () => {
        return [
          {
            value: 1,
            label: "未知"
          },
          {
            value: 2,
            label: "假药"
          }, {
            value: 3,
            label: "虚假信息"
          },
          {
            value: 4,
            label: "政治反动"
          }, {
            value: 5,
            label: "恐怖主义"
          },
          {
            value: 6,
            label: "淫秽色情"
          }
        ]
      }
    },
    freqCategoryOptions: {
      type: Array,
      default: () => {
        return [
          {
            value: 1,
            label: "未知"
          },
          {
            value: 2,
            label: "假药"
          }, {
            value: 3,
            label: "虚假信息"
          },
          {
            value: 4,
            label: "政治反动"
          }, {
            value: 5,
            label: "恐怖主义"
          },
          {
            value: 6,
            label: "淫秽色情"
          }
        ]
      }
    },
  },
  data() {
    return {
      // ----------- 表单 ----------------
      district: 0,
      name: undefined,
      freq: undefined,
      type: 1,
      districtResetFlag: false
    }
  },
  methods: {
    // ----------------- axios ---------------------

    /**
     * 添加新频点分类
     */
    addFreqType: function () {
      if (this.name === undefined || this.freq === undefined) {
        this.$message.error("必须填写频点名称和频点!");
        return 0;
      }
      let pd = {
        district: this.district,
        name: this.name,
        freq: this.freq,
        type: this.type,
        time: this.nowTime
      }
      if (pd.district !== 0 && pd.type === 1) {
        pd.type = 2
      }
      if (pd.district === 0 && pd.type !== 1) {
        this.$message.info("该区域只能添加为普通频点");
        return 0
      }
      addFreqCategory(pd)
          .then(res => {
            this.$message(res.data.data.msg);
            this.$emit("addSuccess");
          })
          .catch(err => {
            console.error(err)
          });
    },
    // ----------------- function ---------------------

    /**
     * 重置表单内容
     */
    resetForm: function () {
      this.district = 0;
      this.name = "";
      this.freq = "";
      this.type = 1;
      this.districtResetFlag = !this.districtResetFlag;
    },

    /**
     * 下拉框内容发生变化 所属地区
     * @param val
     */
    districtChange: function (val) {
      this.district = val;
    },

    /**
     * 下拉框内容发生变化 所属地区
     * @param val
     */
    typeChange: function (val) {
      this.type = val;
    },
  },
  computed: {
    nowTime: function () {
      let now = new Date();
      return `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()} ${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`
    },
    freqTypeForAdd: function () {
      let fto = JSON.parse(JSON.stringify(this.freqCategoryOptions));
      fto.shift();
      return fto;
    }
  },

}
</script>

<style scoped>

</style>